<template>
  <view class="total">
    <view class="card">
      <view class="top justify-between align-center">
        <view>房号：{{ detail?.RoomNo }}</view>
        <view>{{ detail?.SceneType }}</view>
      </view>
      <view class="desc">描述：</view>
      <view class="content">{{ detail?.Note }}</view>
    </view>
    <BottomButton
      @cancel="cancel"
      @confirm="confirm"
      :show-confirm-button="showConfirmButton"
    ></BottomButton>
  </view>
</template>

<script lang="ts" setup>
import BottomButton from '@/components/view/bottom-button.vue'
import { ref } from 'vue'
import {
  getWorkOrder,
  updateWorkOrder,
  UpdateWorkOrder
} from '@/api/server/v2/home-page/work-order'
import { UpdateWorkOrderStatus } from '@/api/group/home-page/work-order'
import { onLoad } from '@dcloudio/uni-app'
import route from '@/utils/route'
import { getUserInfo } from '@/storage/login'
const detail = ref<Item>()
type Item = {
  BsId: string
  BsName: null
  CreationDate: string
  DealWithDate: string
  DealWithStatus: string
  DealerId: null
  DealerName: null
  Id: number
  Note: string
  PushMsgDate: string
  PushMsgStatus: number
  RoomNo: string
  SceneType: string
  WorkType: string
}

const getDetail = async function (id: string | number) {
  const res: Item = (await getWorkOrder(id)) as Item
  detail.value = res
  showConfirmButton.value =
    detail.value?.DealWithStatus === '已完成' ? false : true
}
const showConfirmButton = ref(true)
const cancel = () => {
  route.$route_back()
}
const params = ref<UpdateWorkOrder>()
const confirm = async () => {
  params.value = {
    Id: detail.value?.Id,
    DealWithStatus: '已完成',
    BsId: detail.value?.BsId,
    DealerName: getUserInfo().UserName
  }
  await UpdateWorkOrderStatus(params.value)
  showConfirmButton.value = false
}

onLoad(async ({ id }: any) => {
  await getDetail(id)
})
</script>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6 !important;
}
.card {
  box-sizing: border-box;
  background-color: #fff;
  margin: 24rpx 0 0;
  min-height: 420rpx;
  padding: 20rpx 48rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  .top {
    padding: 0 24rpx;
    height: 90rpx;
    border-bottom: 2rpx solid #e5e5e5;
  }
  .desc {
    margin: 30rpx 24rpx;
  }
  .content {
    margin: 0 24rpx;
  }
}
</style>
